<p><i class="fa fa-thumbs-o-up"></i> Good practices:</p>
<ul>
    <li>When it is suitable, use the good input type (<code class="code-inline">password</code>, <code class="code-inline">number</code>, <code class="code-inline">email</code>, <code class="code-inline">search</code>, <code class="code-inline">url</code>, …).</li>
    <li>To disable a form element, use <code class="code-inline">.tlp-form-element-disabled</code> and <code class="code-inline">disabled</code> attribute.</li>
    <li>To set a form element required, use <code class="code-inline">required</code> attribute and add <code class="code-inline">&lt;i class="fa fa-asterisk"&gt;&lt;/i&gt;</code> in the label.</li>
    <li>To put a form element in error, use <code class="code-inline">.tlp-form-element-error</code>.</li>
    <li>By default, form elements are displayed using <code class="code-inline">width: 100%</code>. You can override this by setting a custom width in css or by adding:
        <ul>
            <li>the <code class="code-inline">size</code> attribute on inputs when it makes sens (e.g. <code class="code-inline">size="4"</code> for a year)</li>
            <li>the <code class="code-inline">cols</code> attribute on textareas when it makes sens (you can also play with <code class="code-inline">rows</code> attribute)</li>
            <li>the <code class="code-inline">.tlp-select-adjusted</code> class on selects and multi-selects</li>
        </ul>

    </li>
</ul>